<!-- 引入富文本的js和css -->
<script src="__ADDON__/store/js/editor.js"></script>
<link href="__ADDON__/store/css/editor.css" rel="stylesheet">
<script src="__ADDON__/store/component/editor.js"></script>
<div id="app">
    <template>
        <el-row :gutter="20">
            <el-col :span="3">
                <el-button type="primary" @click="add" v-if="!vote || vote.mold < 4">添加作品</el-button>
            </el-col>
            <el-col :span="21" style="text-align: right;float: right">
                <el-form :inline="true" label-width="80px">
                    <el-select v-model="params.status" placeholder="请选择审核状态" @change="ChangePage(1)">
                        <el-option label="选择审核状态" value=""></el-option>
                        <el-option label="待审核" value="10"></el-option>
                        <el-option label="通过" value="20"></el-option>
                        <el-option label="驳回" value="30"></el-option>
                    </el-select>
                    <el-select v-model="params.type" placeholder="请选择报名类型" @change="ChangePage(1)">
                        <el-option label="选择活动状态" value=""></el-option>
                        <el-option label="后台添加" value="0"></el-option>
                        <el-option label="自主报名" value="1"></el-option>
                    </el-select>
                    <el-input placeholder="活动id" v-model="params.vote_id" style="width: 100px;"></el-input>
                    <el-input placeholder="分组名称" v-model="params.group_name" style="width: 100px;"></el-input>
                    <el-input placeholder="作品编号" v-model="params.code" style="width: 100px;"></el-input>
                    <el-input placeholder="作品标题" v-model="params.name" style="width: 300px;">
                        <el-button slot="append" icon="el-icon-search" @click="ChangePage(1)"></el-button>
                    </el-input>
                </el-form>
            </el-col>
        </el-row>

        <el-table
                :data="list"
                border
                style="width: 100%;margin-top: 20px">
            <el-table-column
                    prop="vote_name"
                    label="活动名称">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="作品信息">
                <template slot-scope="scope">
                    <div>ID：{{scope.row.id}}</div>
                    <div v-if="scope.row.group_name">分组：{{scope.row.group_name}}</div>
                    <div>编号：{{scope.row.code}}</div>
                    <div>标题：{{scope.row.name}}</div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="票数" align="center">
            </el-table-column>
            <el-table-column
                    prop="image"
                    label="预览图" align="center">
                <template slot-scope="scope">
                    <el-image
                            style="width: 80px; height: 80px"
                            :src="'{$cdn_url|htmlentities}' + scope.row.image"
                            :preview-src-list="['{$cdn_url|htmlentities}' + scope.row.image]"
                            fit="scale-down" v-if="scope.row.mold < 3"></el-image>
                    <el-image
                            style="width: 80px; height: 80px"
                            :src="scope.row.image"
                            :preview-src-list="[scope.row.image]"
                            fit="scale-down" v-else></el-image>
                    <div>
                        <el-link type="primary" :href="'{$cdn_url|htmlentities}' + scope.row.video" target="_blank"
                                 v-if="scope.row.video">播放视频
                        </el-link>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="er_code"
                    label="小程序码" align="center">
                <template slot-scope="scope">
                    <el-image
                            style="width: 60px; height: 60px"
                            :src="scope.row.er_code"
                            :preview-src-list="[scope.row.er_code]"
                            fit="scale-down">
                        <div slot="error" class="image-btn">
                            <a style="line-height: 60px;color: #0a6aa1;cursor:pointer;" @click="qrcode(scope.row.id)">重新生成</a>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="审核状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '10'" style="color: #ccc">待审核</span>
                    <span v-else-if="scope.row.status == '20'" style="color: #409EFF">通过</span>
                    <span v-else style="color: #f00">驳回</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="报名类型" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == '0'">后台添加</span>
                    <span v-else style="color: #ccc">自主报名</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createtime_text"
                    label="创建时间" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle size="small"
                               @click="edit(scope.row)"></el-button>
                    <el-popconfirm title="是否确定删除？" @confirm='del(scope.row.id)'>
                        <el-button slot="reference" type="danger" icon="el-icon-delete" circle size="small"></el-button>
                    </el-popconfirm>
                    <el-button type="primary" size="small"
                               @click="open(scope.row.option)" style="margin-top: 5px" v-if="scope.row.option">报名表单</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total" @current-change='ChangePage'>
            </el-pagination>
        </div>

        <el-dialog
                title="投票作品"
                :visible.sync="dialog"
                :close-on-click-modal="false" center>

            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" :inline="false"
                     class="demo-form-inline">
                <el-form-item label="投票活动" prop="vote_id" v-if="!params.vote_id">
                    <el-select v-model="form.vote_id" placeholder="请选择投票活动" style="width: 100%">
                        {foreach name="votes" item="vo"}
                        <el-option :label="'{$vo.name|htmlentities}'" :value="'{$vo.id|htmlentities}'"></el-option>
                        {/foreach}
                    </el-select>
                </el-form-item>
                <el-form-item label="背景音乐" prop="music_id" v-if="vote && vote.mold < 3">
                    <el-select v-model="form.music_id" placeholder="请选择背景音乐" clearable style="width: 100%">
                        {foreach name="music" item="vo"}
                        <el-option :label="'{$vo.name|htmlentities}'" :value="'{$vo.id|htmlentities}'"></el-option>
                        {/foreach}
                    </el-select>
                </el-form-item>
                <el-form-item label="作品标题" prop="name">
                    <el-input v-model="form.name" placeholder="请输入作品标题"></el-input>
                </el-form-item>
                <div v-if="!vote || vote.mold <3">
                    <el-form-item label="作品图片" prop="images">
                        <el-upload class="upload-demo"
                                action="/api/common/upload"
                                :limit="1"
                                :file-list="fileList"
                                list-type="picture-card"
                                multiple accept=".jpg, .png,.jfif,.pjpeg,.pjp,.gif,.jpeg"
                                :on-remove="removeImage"
                                :on-success="function (res){return upload(res,'images')}">
                            <i v-if="form.images.length < 9" class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="作品视频" prop="video" v-if="vote && vote.mold == 2">
                        <el-upload
                                class="avatar-uploader"
                                action="/api/common/upload"
                                :limit="1"
                                :show-file-list="false"
                                accept=".mp4"
                                :on-success="function (res){return upload(res,'video')}">
                            <video v-if="form.video" :src="'{$cdn_url|htmlentities}' + form.video" class="avatar"></video>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="作品详情" prop="desc">
                        <editor :text="form.desc" @set-html="html" v-if="dialog"></editor>
                    </el-form-item>
                    <el-form-item label="审核状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio label="10">未审核</el-radio>
                            <el-radio label="20">通过</el-radio>
                            <el-radio label="30">驳回</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div style="text-align: center">
                    <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中 ...' : '确 定'
                        }}
                    </el-button>
                    <el-button @click="cancelForm">取 消</el-button>
                </div>
            </el-form>
        </el-dialog>

    </template>
</div>

<script type="module">
    new Vue({
        el: '#app',
        data: function () {
            return {
                vote: null,
                list: [],
                page: 1,
                total: 0,
                params: {
                    vote_id: "",
                    type: "",
                    status: "",
                    code: '',
                    group_name: '',
                    name: '',
                },
                dialog: false,
                loading: false,
                fileList: [],
                form: {
                    id: 0,
                    vote_id: '',
                    music_id: '',
                    name: '',
                    code: '',
                    image: '',
                    images: [],
                    video: '',
                    desc: '',
                    status: '20',
                },
                rules: {
                    vote_id: [
                        {required: true, message: '请选择投票活动', trigger: 'change'},
                    ],
                    code: [
                        {required: true, message: '请输入作品编号', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入作品标题', trigger: 'blur'},
                    ],
                    images: [
                        {required: true, message: '请上传作品图片', trigger: 'change'}
                    ],
                }
            }
        },
        watch: {
            params: {
                handler(newVal, oldVal) {
                    if (newVal.vote_id){
                        get('/kzvote/vote/detail', {vote_id:newVal.vote_id}).then(res => {
                            this.vote = res.data;
                        })
                    }
                },
                deep: true, // 是否深度监听
                immediate: true, // 是否在组件创建时立即执行回调函数
            },
            form: {
                handler(newVal, oldVal) {
                    if (newVal.vote_id && newVal.vote_id !== this.vote_id){
                        get('/kzvote/vote/detail', {vote_id:newVal.vote_id}).then(res => {
                            this.vote = res.data;
                        })
                    }
                },
                deep: true, // 是否深度监听
                immediate: true, // 是否在组件创建时立即执行回调函数
            },
        },

        created() {
            this.params.vote_id = getParam('vote_id')
            this.form.vote_id = getParam('vote_id')
            this.ajax();
        },
        methods: {
            ajax() {
                this.params.page = this.page
                get('', this.params).then(res => {
                    this.list = res.data.rows;
                    this.total = res.data.total;
                })
            },
            ChangePage(page) {
                this.page = page
                this.ajax()
            },
            submit() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.form.images = this.form.images.join(',');
                        post('/addons/kzvote/person/save', this.form).then(res => {
                            this.loading = false;
                            this.$message({
                                type: res.code === 1 ? 'success' : 'error',
                                message: res.msg
                            });
                            if (res.code === 1) {
                                this.dialog = false;
                                this.$nextTick(() => {
                                    if (this.$refs.ruleForm) {
                                        this.$refs.ruleForm.resetFields();
                                    }
                                })
                                this.ajax()
                            }
                        }).catch(err => {
                            this.$message({
                                type: 'error',
                                message: err
                            });
                            this.loading = false;
                        })
                    }
                });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
            },
            add() {
                this.activeName = 'first'
                this.dialog = true;
                this.fileList = []
                this.form = {
                    id: 0,
                    vote_id: getParam('vote_id'),
                    music_id: '',
                    name: '',
                    image: '',
                    images: [],
                    video: '',
                    desc: '',
                    status: '20',
                }
                this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate();
                })
            },
            edit(row) {
                get('/addons/kzvote/person/detail', {id: row.id}).then(res => {
                    this.form = res.data.person;
                    this.form.vote_id = res.data.person.vote_id.toString();
                    if (this.form.music_id){
                        this.form.music_id = res.data.person.music_id.toString();
                    }else{
                        this.form.music_id = '';
                    }
                    if (this.form.images) {
                        this.fileList = this.form.images.map((item, index) => {
                            return {
                                name: index,
                                url: '{$cdn_url|htmlentities}'+item
                            }
                        })
                    }
                    this.dialog = true;
                })
            },
            del(id) {
                get('/addons/kzvote/person/del', {id: id}).then(res => {
                    this.$message({
                        type: res.code === 1 ? 'success' : 'error',
                        message: res.msg
                    });
                    if (res.code === 1) {
                        this.ajax()
                    }
                })
            },
            upload(res, name) {
                if (name === 'images'){
                    this.form.images.push(res.data.url)
                    this.form.image = this.form.images[0]
                }else{
                    this.$set(this.form, name, res.data.url)
                }
            },
            removeImage(file, fileList){
                this.form.images.forEach((item, index) =>{
                    if (item === file.response.data.url){
                        this.form.images.splice(index, 1)
                    }
                })
                this.form.image = this.form.images[0]
            },
            qrcode(id) {
                get('/addons/kzvote/vote/erCode', {id: id}).then(res => {
                    this.$message({
                        type: res.code === 1 ? 'success' : 'error',
                        message: res.msg
                    });
                    if (res.code === 1) {
                        this.ajax()
                    }
                })
            },
            html(text) {
                this.form.desc = text
            },
            open(form) {
                let html = '';
                for (var i in form){
                    for (var j in form[i]){
                        html += '<div>'+j+'：'+ form[i][j]+'</div>'
                    }
                }
                this.$alert(html, '报名表单', {
                    dangerouslyUseHTMLString: true
                });
            },
        }
    })
</script>
<style>
    .el-select {
        min-width: 120px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
        width: 50%;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }

    .avatar {
        width: 150px;
        height: 150px;
        display: block;
    }
</style>